<template>
    <el-menu
      ref="AppMenu"
      class="AppMenu"
      :default-active="activeIndex"
      background-color="#333"
      text-color="#B0B0B2"
      active-text-color="#fff"
      :unique-opened="true"
      router
      @select="menuSelect"
      @open="handleOpen"
      @close="handleClose"
    >
      <Logo :isCollapse="isCollapse" />
      <SliderBarItem :MenuItemData="routersList"></SliderBarItem>
    </el-menu>
</template>
  
<script>
import Logo from "./logo.vue";
import routers from '../../../router/index';
import SliderBarItem from './item.vue';
export default {
  name: "SliderBar",
  props: {
    isCollapse: Boolean
  },
  components: { 
    Logo,
    SliderBarItem 
  },
  data() {
    return {
      activeIndex: "2",
      logoTextShow: true,
      routersList: []
    };
  },
  mounted() {
    this.routersList = routers.options.routes;
  },
  methods: {
    menuSelect (key, keyPath) {
			console.log(key, keyPath);
		},
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
.AppMenu {
  text-align: left;
}
</style>